<template>
  <div v-if="data.length">
    <v-chart :forceFit="true" :background="background" :height="height" :data="data" :scale="scale" :padding="padding">
      <v-tooltip :shared="true"></v-tooltip>
      <v-interval position="branch*value" :color="barColor" opacity="1"> </v-interval>
      <v-axis dataKey="branch" :label="labelX" :tickLine="tickLine"> </v-axis>
      <v-axis dataKey="value" :label="labelY" :title="titleY"> </v-axis>
    </v-chart>
  </div>
</template>

<script>
const tickLine = {
  alignWithLabel: true,
  length: 6,
};

const barColorSet = {
  // LOW: '#F0657D',
  // MIDDLE: '#FED46B',
  // HIGH: '#9AD681',
  LOW: 'red',
  MIDDLE: 'yellow',
  HIGH: 'lightgreen',
};

export default {
  name: 'Bar',

  props: {
    sourceData: {
      type: Array,
      default: () => [],
    },
    height: {
      type: Number,
      default: 400,
    },
  },

  data() {
    return {
      data: [],
      background: {
        fill: '#fff',
        radius: "20px",
      },
      padding: [20, 50, 50, 100],
      scale: [
        {
          dataKey: 'value',
          // tickCount: 3,
          alias: '考核分数',
          min: 150,
          max: 200
        },
      ],
      labelX: {
        autoRotate: true,
        fill: '#fff',
        formatter: function formatter(text) {
          return text
        },
        textStyle: {
          fill: '#fff',
          fontSize: 12,
        },
      },
      labelY: {
        autoRotate: false,
        textStyle: {
          fill: '#fff',
          fontSize: 12,
        },
      },
      tickLine,
      titleX: null,
      titleY: {
        offset: 60,
        textStyle: {
          fill: '#fff',
          fontSize: 12,
        },
      },
      barColor: [
        'value',
        function(val) {
          // console.log(val);
          if (val < 190) return barColorSet.LOW;
          if (val < 195) return barColorSet.MIDDLE;
          return barColorSet.HIGH;
        },
      ],
    };
  },

  created() {
    // console.log('预警图数据--------------', this.sourceData);
    this.data = this.sourceData;
  },

  methods: {},
};
</script>
